@import '@/lib/reset.scss';
a {
    text-decoration: none!important;
}
html,body,#root{
    width:100%;
    height:1400px;
    margin:0;
    padding:0;

.userBox{
    width:100%;
    height:0 auto;
    .user-box{
        margin:0 auto;
        width:100%;
        max-width:960px;
        height:1390px;
        .userTop{
            width:708px;
            height:152px;
            background:#fff;
            float: left;
            // display: flex;
            margin-top:22px;
            .userImg{
                width:92px;
                height:92px;
                float: left;
                margin:30px 30px 0 30px;
                img{
                    width:92px;
                    height:92px;
                    border-radius: 50%
                }
            }
            .userTitle{
                width:377px;
                height:92px;
                float: left;
                margin-top:30px;
                h3{
                    width:377px;
                    height:31px;
                    font-size:28px;
                    line-height:32px;
                    font-weight: 600;
                }
                span{
                    display: block;
                    width:377px;
                    height:22px;
                    font-size:15px;
                    margin-top:10px;
                }
                em{
                    display: block;
                    width:377px;
                    height:22px;
                    margin-top:7px;
                    font-size:14px;
                }
            }
            .userBtn{
                width:108px;
                height:92px;
                // background:#0f0;
                float: right;
                margin:30px 30px 0 0;
                p{
                    width: 87px;
                    height:21px;
                    // margin-bottom:25px;
                    margin-left:21px;
                }
                span{
                    display: block;
                    width:108px;
                    height:34px;
                    border:1px solid #6cbd45;
                    color:#6cbd45;
                    text-align: center;
                    font-size:16px;
                    line-height: 34px;
                    border-radius: 5px;
                    margin-top:37px;
                }
            }
        }
        .userNav{
            float: left;
            width:708px;
            height:50px;
            background:#fff;
            margin-top:13px;
            border-bottom:1px solid #ccc;
            ul{
                li{
                    float: left;
                    width:90px;
                    height:50px;
                    text-align: center;
                    a{
                        width: 90px;
                        display: inline-block;
                        font-size:16px;
                        line-height: 50px;
                        color:rgb(22, 22, 22);
                        // padding-bottom:15px; 
                        height: 50px;
                        span{
                            font-size:15px;
                            color:#909090;
                            margin-left:5px;
                        }
                    }
                    
                    em{
                        font-size:16px;
                        line-height: 50px;
                        color:rgb(12, 12, 12);
                        span{
                            font-size:15px;
                            color:#909090;
                            margin-left:5px;
                        }
                    }
                }
                .active {
                    
                        border-bottom:2px solid #007fff;
                            color:#007fff;
                    
                   
                }
            }
        }
        .userRight{
            width:240px;
            height:343px;
            background: rgba(238, 235, 235, 0.966);
            float: right;
            position: fixed;
            top:83px;
            left:872px;
            h2{
                width:240px;
                height:52px;
                line-height: 52px;
                padding-left:20px;
                font-size:17px;
                background:#fff;
                font-weight: 600;
                color: #31445b;
                border-bottom: 1px solid rgba(230,230,231,.5);
            }
            .userText{
                width:240px;
                height:93px;
                background:#fff;
                margin-bottom:15px;
                p{
                    font-size: 16px;
                    color:#000;
                    line-height:20px;
                    padding:15px 0 0 22px;
                }
            }
            .action{
                width:240px;
                height:75px;
                background:#fff;
                margin-bottom: 15px;
                span{
                    text-align: center;
                    display:inline-block;
                    width:120px;
                    height:51px;
                    font-size:16px;
                    color:#000;
                    float: left;
                    margin:12px 0;
                    border-right:1px solid #ccc;
                    em{
                        display: block;
                        width:120px;
                        height:30px;
                        font-weight: 600;
                    }
                }
                span:nth-of-type(2){
                    border:0;
                }
            }
            .down{
                width:240px;
                height:100px;
                border-top:1px solid rgb(221, 220, 220);
                span{
                    width:240px;
                    height:50px;
                    border-bottom:1px solid rgb(221, 220, 220);
                    display: block;
                    font-size:15px;
                    color:#0e0e0e;
                    line-height: 50px;
                    em{
                        float: right;
                    }
                }
            }
        }
        .userCenter{
            width:708px;
            height:auto;
            float: left;
            
            .userCentent{
                width:708px;
                height:auto;
                background:#fff;
                margin-bottom:7px;
                .header{
                    width:708px;
                    height:64px;
                    .left{
                        float: left;
                        width:258px;
                        height:48px;
                        margin:16px 0 0 20px;
                        position: relative;
                            .left-Img{
                                width:45px;
                                height:45px;
                                background: #000;
                                border-radius: 50%;
                                float: left;
                                img{
                                    width:45px;
                                    height:45px;
                                    border-radius: 50%;
                                }
                            }
                            
                            .left-Title{
                                width:150px;
                                height:20px;
                                line-height: 24px;
                                font-weight: 600;
                                margin-left:12px;
                                float: left;
                                color:rgb(26, 26, 26);
                                font-size:16px;
                            }
                            .left-xinxi{
                                margin-left:12px;
                                float: left;
                                line-height: 29px;
                                height:20px;
                                color: #8a9aa9;
                            }
                            .topicInfo{
                                width:267px;
                                height:158px;
                                background: #fff;
                                border:1px solid #ccc;
                                position: absolute;
                                top :55px;
                                left:-120px;
                                z-index: 1;
                                display: none;
                                .Info-header{
                                    width:265px;
                                    height:70px;
                                    margin-top:12px;
                                    .Info-left{
                                        width:63px;
                                        height:63px;
                                        border-radius: 50%;
                                        float: left;
                                        background: #000;
                                        margin: 3px 0 0 20px;
                                        img{
                                            width:63px;
                                            height:63px;
                                            border-radius: 50%;
                                        }
                                    }
                                    .Info-right{
                                        width:170px;
                                        height:70px;
                                        float: right;
                                        span{
                                            width:150px;
                                            height:25px;
                                            display: block;
                                            font-size:13px;
                                            line-height:25px;
                                            // text-align: center;
                                            margin:6px 0;
                                            color:#0e0e0e;
                                        }
                                        em{
                                            width:150px;
                                            height:25px;
                                            display: block;
                                            overflow: hidden;
                                            text-overflow:ellipsis;
                                            white-space:nowrap;
                                            margin-top:8px;
                                        }
                                    }
                                }
                                .Info-footer{
                                    width:266px;
                                    height:74px;
                                    .Info-one{
                                        width:50px;
                                        height:45px;
                                        float: left;
                                        margin:15px 25px 0 5px;
                                        text-align: center;
                                        b{
                                            width:50px;
                                            font-size: 16px;
                                            display: inline-block;
                                        }
                                        i{
                                            height:22px;
                                            font-size: 12px;
                                            line-height: 20px;
                                            color:#8a9aa9;
                                        }
                                    }
                                    .Info-two{
                                        width:50px;
                                        height:45px;
                                        float: left;
                                        margin:15px 45px 0 0;
                                        text-align: center;
                                        b{
                                            width:50px;
                                            font-size: 16px;
                                            display: inline-block;
                                        }
                                        i{
                                            height:22px;
                                            font-size: 12px;
                                            line-height: 20px;
                                            color:#8a9aa9;
                                        }
                                    }
                                    .Info-there{
                                        width:55px;
                                        height:26px;
                                        text-align: center;
                                        line-height: 26px;
                                        border-radius: 2px;
                                        display:block;
                                        border:1px solid #37c701;
                                        margin:30px 0 0 10px;
                                        float: left;
                                        a{
                                            color:#37c701;
                                            font-size:12px;
                                        }
                                    
                                    }
                                }
                            }
                            &:hover{
                            .topicInfo{
                                display: block;
                            }
                        }
                    }
                    .right{
                        float: right;
                        span{
                            display: block;
                            width:55px;
                            height:26px;
                            border:1px solid #37c701;
                            text-align: center;
                            color:#37c701;
                            margin:23px 20px 0 0;
                            border-radius: 3px;
                            line-height: 26px;
                        }
                    }
                }
                .content{
                    width:507px;
                    height:auto;
                    font-size: 15px;
                    line-height: 40px;
                    position: relative;
                    margin: 0 20px 7px 77px;
                    color: #17181a;
                    
                }
                    .images{
                        width:514px;
                        height:auto;
                        position: relative;
                        margin: 4px 20px 0 77px;
                        img{
                            width:110px;
                            height:110px;
                            margin:4px 4px 0 0;
                        }
                    }
                p{
                    height:24px;
                    position: relative;
                    margin: 10px 20px 0 77px;
                    a{
                        font-size: 13px;
                        display: inline-block;
                        line-height: 22px;
                        padding: 0 12px;
                        border: 1px solid #007fff;
                        border-radius: 14px;
                        color: #007fff;
                        user-select: none;
                    }
                }
                .footer{
                    width:640px;
                    height:28px;
                    display: flex;
                    position: relative;
                    margin-top:12px;
                    border-top: 1px solid #ebebeb;
                    span{
                        display: block;
                        width:236px;
                        height:auto;
                        margin:5px 0;
                        border-right:1px solid #ebebeb;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        b{
                            display: block;
                            width:18px;
                            height:18px;
                            img{
                                width:16px;
                                height:16px;
                            }
                        }
                        em{
                            display: block;
                            margin:3px 0 0 3px;
                            font-size: 13px;
                            font-weight: 500;
                            color: #8a93a0;
                        }
                    }
                }
            }
        }
    }
}
}